<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>map demo</title>
    <link rel="stylesheet" href="js/lib/ol4.6.4/ol.css" type="text/css">
    <link rel="stylesheet" href="css/demo.css" type="text/css">
</head>
<body>
<div id="map1" class="map"></div>
<div id="map2" class="map"></div>
<div id="map3" class="map"></div>
<script src="js/lib/ol4.6.4/ol.js"></script>
<script src="js/lib/jquery/jquery-3.3.1.min.js"></script>
<script>
    var view = new ol.View({
        zoom: 4,
        center:ol.proj.transform([110, 39],"EPSG:4326", "EPSG:3857")
    });

    var map1 = new ol.Map({
        controls: ol.control.defaults({
            attribution: false
        }).extend([]),
        target: "map1",
        layers: [
            getTdtLayer("vec_w"),
            getTdtLayer("cva_w")
        ],
        view: view
    });

    var map2 = new ol.Map({
        controls: ol.control.defaults({
            attribution: false
        }).extend([]),
        target: "map2",
        layers: [
            getTdtLayer("img_w")
        ],
        view: view
    });

    var map3 = new ol.Map({
        controls: ol.control.defaults({
            attribution: false
        }).extend([]),
        target: "map3",
        layers: [
            getTdtLayer("ter_w")
        ],
        view: view
    });

    function getTdtLayer(lyr){
        var url = "http://t0.tianditu.com/DataServer?T="+lyr+"&X={x}&Y={y}&L={z}";
        var layer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                url:url
            })
        });
        return layer;
    }
</script>
</body>
</html>